import { defineComponent } from 'vue';
import { getProdStatus, productCaseList } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import Detail from '../Detail';
import SearchRow from '../SearchRow';
import { ActionSheet } from 'vant';

export default defineComponent({
  name: 'Product',
  setup() {
    const detailInfo = reactive({
      show: false,
      list: [],
      header: {}
    }) as AnyObject;
    const detailRef = ref();
    const data = reactive({
      search: {
        dateTime: undefined
      },
      list: [
        {
          key: 'dateTime',
          type: 'popup',
          title: '日期选择',
          icon: 'calendar',
          placeholder: '请选择'
        }
      ]
    }) as AnyObject;
    const tableDetail = [
      { title: '日期', key: 'date' },
      { title: '周产量计划达成', key: 'production_plan' },
      { title: '周品质合格率', key: 'pass_rate' }
    ];
    const option = ref({
      tooltip: {
        trigger: 'axis',

        // formatter: '{b0}: {c0}<br />{b1}: {c1}'
        axisPointer: {
          type: 'shadow'
        }
      },
      title: {
        text: '本周产量计划达成',
        subtext: '223',
        textStyle: { fontSize: 14, fontWeight: 'normal', color: '#666' },
        subtextStyle: {
          fontSize: 24,
          fontWeight: 'bold',
          color: '#000',
          lineHeight: 50
        },
        right: '5%',
        top: '10%'
      },

      color: ['#4a74ea', '#eb7b3b'],
      legend: {
        orient: 'vertical',
        left: '60%',
        top: '55%',
        itemWidth: 10,
        textStyle: {
          rich: {
            a: {
              fontSize: 14,
              color: '#333333',
              fontWeight: 'bold',
              padding: [0, 0, 0, 5]
            }
          }
        }
      },
      grid: {
        left: '-18%',
        right: '50%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          axisTick: {
            alignWithLabel: true
          },
          splitNumber: 4,
          axisLabel: {
            formatter: (name: number) => name / 1000 + 'k'
          }
        }
      ],
      yAxis: [
        {
          type: 'category',
          data: ['本周产量计划'],
          show: false
        }
      ],
      series: [
        {
          name: '计划数',
          type: 'bar',
          barWidth: '15%',
          data: []
        },
        {
          name: '完工数',
          type: 'bar',
          barWidth: '15%',
          data: []
        }
      ]
    }) as any;
    const option2 = ref({
      tooltip: {
        trigger: 'item'
      },
      title: {
        text: '本周品质合格率',
        subtext: '',
        textStyle: {
          fontSize: 14,
          fontWeight: 'normal',
          color: '#666',
          lineHeight: 40
        },
        subtextStyle: { fontSize: 24, fontWeight: 'bold', color: '#000' },
        left: '60%',
        top: '10%'
      },
      color: ['#4a74ea', '#eb7b3b'],
      legend: {
        orient: 'vertical',
        left: '60%',
        y: '60%',
        icon: 'circle',
        itemWidth: 10,
        textStyle: {
          rich: {
            a: {
              fontSize: 14,
              color: '#333333',
              fontWeight: 'bold',
              padding: [0, 0, 0, 5]
            }
          }
        }
      },
      series: [
        {
          name: '本周产品品质',
          type: 'pie',
          radius: ['55%', '75%'],
          avoidLabelOverlap: false,
          center: ['25%', '55%'],
          itemStyle: {
            borderRadius: 2
          },
          label: {
            show: false
          },

          labelLine: {
            show: true,
            length: 5
          },

          data: []
        }
      ]
    }) as any;

    getProdStatus().then((res: AnyObject) => {
      option2.value.series[0].data = [
        { value: res.data.pass_number, name: '合格数' },
        { value: res.data.bad_number, name: '不良数' }
      ];
      option2.value.title.subtext = res.data.pass_rate;
      option.value.title.subtext = res.data.production_plan;
      option.value.series[0].data = [res.data.plain_number];
      option.value.series[1].data = [res.data.finish_number];
      option.value.legend.formatter = (name: string) => {
        return (
          name +
          ('{a|' +
            (name === '计划数'
              ? res.data.plain_number
              : res.data.finish_number) +
            '}')
        );
      };
      option2.value.legend.formatter = (name: string) => {
        return (
          name +
          ('{a|' +
            (name === '合格数' ? res.data.pass_number : res.data.bad_number) +
            '}')
        );
      };
    });

    const viewDetail = () => {
      detailRef.value.show = true;
    };
    const viewLiDetail = (item: AnyObject) => {
      console.log(item);
      detailInfo.show = true;
      detailInfo.header = {
        title: item.production_plan,
        date:item.date
      };
      detailInfo.list = [
        { name: '计划数', content: item.plain_number },
        { name: '完工数', content: item.finish_number },
        { name: '合格数', content: item.pass_number },
        { name: '不良数', content: item.bad_number },
        { name: '周品质合格率', content: item.pass_rate},
      ];
    };
    return () => (
      <>
        <SheltV2
          title="生产状态"
          more="查看详情"
          onViewDetail={viewDetail}
          question="<div><p>【该数据每日02:00更新一次】</p><p>生产状态数据同步MES系统的数据，获取展示本月产量计划达成和本周品质合格率</p></div>"
        >
          <Echarts option={option.value} />
          <Echarts option={option2.value} />
        </SheltV2>
        <Detail
          title="生产状态"
          datakey='dateTime'
          ref={detailRef}
          filterDetail={data}
          tableDetail={tableDetail}
          requestApi={productCaseList}
          onViewLiDetail={viewLiDetail}
        />
        <ActionSheet
          v-model:show={detailInfo.show}
          title="退货详情"
          class="detailinfo"
        >
          <div class="detailinfo_header flex-between">
            <div>
              <p style={{marginBottom:"10px"}}>周产量计划达成</p>
            <div class="title">{detailInfo.header.title}</div>
            </div>
            <div>{detailInfo.header.date}</div>
          </div>
          <ul class="detailinfo_content">
            {detailInfo.list.map((item: AnyObject) => (
              <li class="flex-start">
                <div class="title">{item.name}</div>
                <div class="content">{item.content}</div>
              </li>
            ))}
          </ul>
        </ActionSheet>
      </>
    );
  }
});
  